<template>
    <div>
        参数的形式是/:id/ 获取的方式是this.$route.params.id
        <ul>
            <li v-for="item in list" :key="item.id">
                <router-link :to="'/news-detail/'+item.id">{{item.title}}</router-link>
            </li>
        </ul>
        <hr> 参数的形式是/news-detail?id=1 获取的方式是this.$route.query.id
        <ul>
            <li v-for="item in list" :key="item.id">
                <router-link :to="'/news-detail?id='+item.id">{{item.title}}</router-link>
            </li>
        </ul>
        <router-view></router-view>
        <!-- 此处会根据路由的改变，匹配路由规则，显示对应的组件-->
    </div>
</template>
<script>
export default {
    data() {
        return {
            list: [{
                id: 1,
                title: '最近广州大晴天'
            }, {
                id: 2,
                title: '广州人民发来贺电'
            }]
        }
    }
}
</script>
<style>
</style>
